<template>
	<view>
		<view class="draw-bg-box">
			<w-image src="/static/cj/draw-bg.png" mode="widthFix" class="w-100"></w-image>
			<view class="num flex flex-ai-center flex-js-center">
				<!-- 抽奖消耗藏品 -->
				<view class="flex flex-ai-center flex-js-center" v-if="info.type==20">
					<text class="font-color-white font-size-12">{{handleLang('剩余抽奖次数：')}}</text>
					<view class="font-w-600 ci-number">{{ info.remaining || 0 }}</view>
					<text class="font-color-white font-size-12">次</text>
				</view>
				<!-- 抽奖消耗水晶 -->
				<view class="flex flex-ai-center flex-js-center" v-if="info.type==10">
					<text class="font-color-white font-size-12" style="letter-spacing: 4rpx;">{{handleLang('剩余抽奖次数：')}}</text>
					<view class="font-w-600 ci-number">{{ info.remaining || 0 }}</view>
					<text class="font-color-white font-size-12">次</text>
				</view>
			</view>
			<view v-if="activeState()=='0'"  class="countdown_con"><countdown :time="new Date(info.start_time).getTime() - nowTimestamp"></countdown></view>
			<view class="btn-box">
				<view v-if="oneBtnStatus()" style="padding: 0 56rpx;">
					<!-- <view class="flex flex-js-center btn-one" :class="{'btnAction':isbtnAction}"
						@touchstart="!isStart && (isbtnAction=true)" @touchend="isStartDraw(1)">
						<w-button style="width: 522rpx;" :style="{border:getBtnText().isHui ?'6rpx solid #C4C4C4':''}" :disabled="getBtnText().isHui" type="cj">{{ getBtnText().name }}</w-button>
					</view> -->
					<view @touchstart="!isStart && (isbtnAction=true)" @touchend="isStartDraw(1)" v-if="!getBtnText().isHui" class="btn-color-bg kongxinzi text-center">{{ getBtnText().name }}</view>
					<view @touchstart="!isStart && (isbtnAction=true)" @touchend="isStartDraw(1)" v-else class="btn-hui-bg kongxinzi text-center">{{ getBtnText().name }}</view>
				</view>
				<view v-else class="flex flex-ai-center flex-js-sb" style="padding: 0 56rpx;">
					<view class="btn-one flex pt-10 flex-js-center" @touchstart="!isStart && (isbtnAction=true)" @touchend="isStartDraw(1)">
						<w-image src="/static/cj/drow-one.png" width="73" mode="widthFix"></w-image>
					</view>
					<view class="btn-one flex pt-10 flex-js-center ml-13" @touchstart="!isStart && (isbtnAction=true)" @touchend="isStartDraw(5)">
						<w-image src="/static/cj/drow-five.png" width="73" mode="widthFix"></w-image>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="info.type==10" class="plr-15 mtb-26">
			<view class="content-bg pa-12 br-18">
				<view class="flex flex-ai-center flex-js-center">
					<view class="title-number">当前已抽</view>
					<view class="num-box">{{ num }}</view>
					<view class="title-number">次</view>
				</view>
				<view class="js-sy-box flex flex-ai-center flex-js-center">
					<w-icon :name="crystal().icon" size="25"></w-icon>
					<view class="font-size-14 ml-4 font-w-500" style="color: #4F6DCD;">拥有：</view>
					<view class="font-size-14 font-w-500" style="color: #4F6DCD;">{{ crystal().totalNum }}</view>
				</view>
				<!-- 抽奖消耗水晶 -->
				<view class="consume flex flex-ai-center flex-js-center">
					<view class="text">
						<text>{{ info.integral_1 }}</text>
						<w-icon :name="crystal().icon" size="20" class="mlr-4"></w-icon>
						<text>抽取1次</text>
					</view>
				</view>
				<w-icon @click.stop.native="$emit('refresh')" class="cj-shuaxin" name="cj-shuaxin" size="20"></w-icon>
			</view>
		</view>
		<!-- 抽奖确认弹窗 -->
		<confimPop v-model="showPop" :num="num" @confim="startDraw" :info="info" @refresh="$emit('refresh')">
		</confimPop>
		<!-- 抽奖结果弹窗 -->
		<resultPop v-model="showResultPop" :num="num" :prize="prize" @confim="again"></resultPop>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		lotteryStartApi
	} from '@/api/lottery/index.js';
	import confimPop from './confimPop.vue';
	import resultPop from './resultPop.vue';
	import countdown from './countdown.vue';
	export default {
		name: "lotteryBox",
		components: {
			confimPop,
			resultPop,
			countdown
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		computed: {
			...mapState('config', ['nowTimestamp']),
			notice() {
				return this.info.lotteryList.map(item => this.handleLang(item.msg))
			}
		},
		data() {
			return {
				isMove: false, // 动画
				isbtnAction: false, // 按钮效果
				isbtn1Action: false, // 按钮效果
				isbtn5Action: false, // 按钮效果
				showPop: false, // 确认弹窗
				showResultPop: false, // 抽奖结果
				num: 1, // 抽奖次数
				isStart: false, // 是否开始中
				prize: [] // 抽奖结果
			};
		},
		mounted() {
			this.createNowTimeTimer()
		},
		methods: {
			...mapActions('config', ['createNowTimeTimer']),

			// 判断是否可以抽奖
			isStartDraw(num) {

				let {
					remaining,
					free_number
				} = this.info;
				let status = this.activeState();
				this.isbtnAction = false;
				this.isbtn1Action = false;
				this.isbtn5Action = false;
				if (status == 0) {
					uni.$u.toast('暂未开始')
				} else if (status == 2) {
					uni.$u.toast('活动已结束')
				} else if (Number(remaining) <= 0) {
					uni.$u.toast('次数不足')
				} else if (this.isStart) {
					uni.$u.toast('抽奖进行中...')
				} else if (free_number > 0) {
					this.num = num;
					this.startDraw();
				} else {
					this.num = num;
					uni.showLoading()
					setTimeout(() => {
						uni.hideLoading()
						this.showPop = true;
					}, 1000)
				}
			},

			// 再抽一次
			again() {
				let {
					remaining
				} = this.info;
				let num = this.num;
				if (remaining < num) {
					uni.$u.toast('次数不足')
				} else {
					this.showResultPop = false;
					this.startDraw();
				}
			},

			// 开始抽奖
			startDraw() {
				uni.$u.throttle(() => {
					let {
						id
					} = this.info;
					uni.showLoading()
					lotteryStartApi({
						lotteryId: id,
						number: this.num
					}).then(res => {
						this.prize = res.data;
						this.info.remaining = this.info.remaining - this.num; //次数扣除
						this.crystalKC(); //水晶扣除
						this.startAnimation()
					}).catch(() => {})
				}, 1000)
			},

			// 开始动画
			startAnimation() {
				uni.showLoading({
					title: '抽奖中'
				})
				this.isStart = true;
				this.isMove = true;
				// 时间是动画的累加时间
				setTimeout(() => {
					uni.hideLoading()
					this.showResultPop = true;
					this.isMove = false;
					this.isStart = false;
					this.$emit('refresh')
				}, 1000)
			},

			// 活动状态
			activeState() {
				// status 0暂未开始 1活动进行中 2活动已结束
				let {
					start_time,
					end_time
				} = this.info;
				let status = this.$tools.checkTimeBetween(this.nowTimestamp, start_time, end_time)
				return status
			},

			// 获取按钮的状态
			getBtnText() {
				try {
					let btnType = {
						name: '',
						isHui: false,
						btnbg:''
					}
					let {
						remaining,
						free_number,
						is_consecutive_draws_1,
						is_consecutive_draws_5
					} = this.info;
					let status = this.activeState()
					switch (true) {
						case status == 0:
							btnType.name = '暂未开始'
							btnType.isHui = true
							btnType.btnbg = 'btn-12'
							break;
						case status == 2:
							btnType.name = '活动已结束'
							btnType.isHui = true
							btnType.btnbg = 'btn-10'
							break;
						case remaining == 0:
							btnType.name = '次数不足'
							btnType.isHui = true
							btnType.btnbg = 'btn-11'
							break;
						case free_number > 0:
							btnType.name = '免费抽一次'
							btnType.isHui = false
							btnType.btnbg = 'btn-1'
							break;
						case is_consecutive_draws_1 && !is_consecutive_draws_5:
							btnType.name = '抽一次'
							btnType.isHui = false
							btnType.btnbg = 'btn7'
							break;
					}
					return btnType
				} catch (err) {
					console.log(err)
					return ''
				}
			},

			// 判断按钮类型
			oneBtnStatus() {
				let {
					remaining,
					free_number,
					is_consecutive_draws_1,
					is_consecutive_draws_5
				} = this.info;
				let status = this.activeState();
				if (remaining == 0 || status == 0 || status == 2 || free_number > 0 || (is_consecutive_draws_1 && !
						is_consecutive_draws_5)) {
					return true
				} else {
					return false
				}
			},

			// 水晶扣除
			crystalKC() {
				let {
					integral_1,
					crystal,
					crystal_blue,
					crystal_purple,
					crystal_yellow,
					free_number
				} = this.info;
				let num = this.num * integral_1;
				if (free_number != 0) return;
				switch (true) {
					case crystal == '10':
						this.info.crystal_yellow = crystal_yellow - num;
						break;
					case crystal == '20':
						this.info.crystal_yellow = crystal_purple - num;
						break;
					case crystal == '30':
						this.info.crystal_yellow = crystal_blue - num;
						break;
				}
			},

			// 水晶类型
			crystal() {
				let {
					crystal,
					crystal_blue,
					crystal_purple,
					crystal_yellow
				} = this.info;
				switch (true) {
					case crystal == '10':
						return {
							icon: 'hsj', name: '黄', totalNum: crystal_yellow
						}
						break;
					case crystal == '20':
						return {
							icon: 'zsj', name: '紫', totalNum: crystal_purple
						}
						break;
					case crystal == '30':
						return {
							icon: 'lsj', name: '蓝', totalNum: crystal_blue
						}
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 按钮缩放
	.btnAction {
		transform: scale(0.8);
	}
	.kongxinzi {
		-webkit-text-stroke: 1px #fff;
		color: #fff;
		font-size: 60rpx;
	}
	.draw-bg-box {
		position: relative;
		.num {
			position: absolute;
			bottom: 206rpx;
			left: 136rpx;
			width: 476rpx;
			height: 60rpx;
			background: rgba(255,255,255,0.35);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			.ci-number {
				height: 32rpx;
				background: #6609B0;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				color: #fff;
				padding: 0 12rpx;
				margin-right: 8rpx;
				line-height: 32rpx;
			}
		}
		.countdown_con {
			position: absolute;
			bottom: 250rpx;
			width: 100%;
			
		}
		.btn-box {
			position: absolute;
			bottom: 50rpx;
			width: 100%;
			.btn-color-bg {
				width: 296rpx;
				height: 120rpx;
				background-image: url($IMG_URL + '/static/cj/12.png');
				background-size: 100% 100%;
				margin: auto;
			}
			.btn-hui-bg {
				width: 296rpx;
				height: 120rpx;
				background-image: url($IMG_URL + '/static/cj/btn-hui.png');
				background-size: 100% 100%;
				margin: auto;
			}
			.btn-one {
				width: 296rpx;
				height: 120rpx;
				background-image: url($IMG_URL + '/static/cj/12.png');
				background-size: 100% 100%;
			}
		}
	}
	.content-bg {
		background: linear-gradient( 90deg, #FFE9F5 0%, #DEFDF5 100%);
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		position: relative;
		.title-number {
			font-family: OPPO Sans 4.0, OPPO Sans 40;
			font-weight: bold;
			font-size: 32rpx;
			color: #4A6ACF;
		}
		.num-box {
			height: 40rpx;
			padding: 0 24rpx;
			background: #1B52F7;
			border-radius: 8rpx;
			text-align: center;
			line-height: 40rpx;
			color: #fff;
			font-weight: 500;
			margin: 0 12rpx;
		}
		.cj-shuaxin {
			position: absolute;
			right: 20rpx;
			top: 24rpx;
		}
	}
	.js-sy-box {
		width: 100%;
		height: 33px;
		background: #E7ECFF;
		border-radius: 16rpx;
		margin-top: 42rpx;
	}
	.consume {
		width: 261px;
		height: 52px;
		background: $theme-color;
		border-radius: 26px 26px 26px 26px;
		margin: 54rpx auto 0;
	
		>.text {
			width: auto;
			height: 64rpx;
			// background: rgba(245,245,245,0.3);
			border-radius: 16rpx;
			padding: 0 32rpx;
			@extend .flex-center;
	
			>text {
				color: #fff;
				font-weight: 600;
				font-size: 32rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			
		}
	}
</style>